import React, { useEffect, useState } from 'react'
import { useMappedState, useDispatch } from "redux-react-hook"
import {
    Form,
    Input,
    Button,
    Table,
    Space,
    Switch,
    Select,
    Drawer,
    message,
    Popconfirm,
} from 'antd';
import request from "../../utils/request";


import "./Information.css"
import Infomations from "../../store/actions/Information";

const Infomation = () => {
    const { TextArea } = Input;
    const dispatch = useDispatch();
    const [flag, setFlag] = useState();
    const { Infomationlist, from } = useMappedState((state) => {
        return state.Information
    })


    useEffect(() => {
        getter();
    }, [Infomationlist])

    //获取
    const getter = async () => {
        const res = await request({
            url: "/api/GetInfomation",
            method: "get",
        })
        dispatch(Infomations.getInfomation(res.data));
    };
    const onFinish = async (values) => {
        if (!values.title) values.title = "";
        if (!values.state) values.state = "";
        let res = await request({
            url: '/api/searchInfomation',
            method: "get",
            params: {
                ...values,
            }
        })
        dispatch(Infomations.getInfomation(res.data));
    }
    //表格
    const { Column } = Table;
    const { Option } = Select;


    //状态
    const State = async (text) => {
        let res = await request({
            url: "/api/stateInfomation",
            method: "put",
            data: {
                id: text.id
            }
        })
        message.success(res.message);
        getter();
    }


    //弹框
    const [visible, setVisible] = useState(false);

    const showDrawer = (type, text) => {
        if (type !== "新增") {
            dispatch(Infomations.editor(text))
        }
        setFlag(type);
        setVisible(true);
    };
    const Change = (type, text) => {
        dispatch(Infomations.editor({
            type, text
        }))
    }
    const onClose = () => {
        dispatch(Infomations.editor({}))
        setVisible(false);
    };
    const AddEditor = () => {
        if (flag === "新增") {
            dispatch(Infomations.addInfomation({}))
        } else {
            dispatch(Infomations.editorInfomation({}))
        }
        getter();
        onClose();
    }
    //删除
    const Delete = async (text) => {
        const res = await request({
            url: "/api/DeleteInfomation",
            method: "delete",
            params: { id: text.id },
        })
        message.success(res.message);
        getter();
    }
    return (
        <div className="Information">
            <div className="InformationHeader">
                资讯管理
            </div>
            <div className="InformationMain">
                <div className="InformationTop">
                    <Form name="complex-form" onFinish={onFinish} >
                        <Form.Item
                            name="title"
                            label="搜索:"
                        >
                            <Input placeholder="资讯名称" />
                        </Form.Item>
                        <Form.Item
                            name="state"
                            label="状态:"
                        >
                            <Select
                                placeholder="请选择"
                            >
                                <Option value="">请选择</Option>
                                <Option value="1">开启</Option>
                                <Option value="0">关闭</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label=" " colon={false}>
                            <Button htmlType="submit">
                                查询
                            </Button>
                            <Button type="primary" onClick={() => showDrawer("新增")}>
                                新增
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
                <div className="Informationmain">
                    <div className="informationmain">
                        <Table dataSource={Infomationlist} bordered>
                            <Column title="序号" dataIndex="key" key="key" align="center" />
                            <Column title="文章标题" dataIndex="title" key="title" align="center" />
                            <Column title="创建人" dataIndex="originator" key="originator" align="center" />
                            <Column title="创建日期" dataIndex="date" key="date" align="center" />
                            <Column
                                title="状态"
                                dataIndex="tags"
                                key="tags"
                                align="center"
                                render={(text, record) => (
                                    <>
                                        {
                                            <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={record.state} onClick={() => State(record)} />
                                        }
                                    </>
                                )}
                            />
                            <Column
                                title="操作"
                                key="action"
                                render={(text, record) => (
                                    <Space size="middle">
                                        <a onClick={() => showDrawer("编辑", record)}>编辑</a>
                                        <Popconfirm
                                            title="是否要删除？请再次确定"
                                            onConfirm={() => Delete(record)}
                                            okText="Yes"
                                            cancelText="No"
                                        >
                                            <a>删除</a>
                                        </Popconfirm>
                                    </Space>
                                )}
                                align="center" />
                        </Table>
                    </div>
                </div>
                <div className="addeditor">
                    <Drawer
                        title={flag}
                        width={500}
                        onClose={onClose}
                        visible={visible}
                        extra={
                            <Space>
                                <Button onClick={onClose}>取消</Button>
                                <Button type="primary" onClick={AddEditor}>
                                    提交
                                </Button>
                            </Space>
                        }
                    >
                        <Input size="large" placeholder="请输入文章标题" value={from.title} onChange={(e) => Change("title", e.target.value)} />
                        <br />
                        <br />
                        <Input size="large" placeholder="请输入姓名" value={from.originator} onChange={(e) => Change("originator", e.target.value)} />
                        <br />
                        <br />
                        <TextArea rows={4} placeholder="请输入内容" value={from.content} onChange={(e) => Change("content", e.target.value)} />
                    </Drawer>
                </div>
            </div>
        </div>
    )
}

export default Infomation
